<template>
	<view style="background-color: #fff;padding-bottom: 100rpx;">
		<image src="http://vs-m.szsszykj.com/img/120201225_5fe5864116686.gif" class="topimg"></image>
		<view :style="{'top':top}" :class="[top==0 ? 'showtips' : '' ]" class="download-tip">{{count}}条数据</view>
		<mescroll-body-diy ref="mescrollRef" @init="mescrollInit" top="0" bottom="100" :down="downOption"
			@down="downCallback" @up="upCallback">
			<block v-for="(item,i) in data">
				<view class="showdate" style="margin-top:20px;">
					<view style="width: 70%;margin: auto;">
						<image class="dateimg" mode="" src="../../static/img/lefticon.png" style="height: 15.1709px;"
							role="img"></image>
						<view class="datetext" style="margin-top:-4px; width: 100px;">
							<view style="width:100%; margin:auto">{{item.lunar}}</view>
						</view>
						<image class="dateimg" mode="" src="../../static/img/righticon.png" role="img"
							style="height: 14.6999px; "></image>
					</view>
				</view>
				<card2 v-for="(Item, index) in item.newslist" :key="index" :newstitle="Item.shorttitle"
					:newsthumb="Item.thumb" :newscode="Item.ano" @toNewsDetail="clickToDetail(Item.ano,Item.type)">
				</card2>
			</block>
			<!-- <button class="seemore" @click="seemore" v-show="!showMore">点击广告继续浏览</button> -->
		</mescroll-body-diy>
	</view>
</template>

<script>
	// 在页面中定义插屏广告
	let interstitialAd = null
	import card2 from '@/components/card/card2.vue';
	// 引入mescroll-mixins.js
	import MescrollBodyDiy from "@/components/mescroll-diy/wx/mescroll-body.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			card2,
			MescrollBodyDiy, // 避免与main.js注册的全局组件名称相同,否则注册组件失效(iOS真机 APP HBuilderX2.7.9)
		},
		data() {
			return {
				showMore: true,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {},
				pageHeight: 500,
				newsList: [],
				top: 0, //提示,到顶部的距离
				beforeid: '',
				endid: '',
				count: '',
				data: [],
				banner: '../../static/img/banner.png',
				ano: '',
				tempnewsList: [],
				tempdata: [],
			};
		},
		onReady() {
			if (this.ano) {
				this.upCallback(0);
				uni.navigateTo({
					url: '/pages/news/detail?ano=' + this.ano
				})
			}
		},
		onLoad(options) {
			// this.getBannerList();
			this.ano = options.ano;
			// 在页面onLoad回调事件中创建插屏广告实例
			if (wx.createInterstitialAd) {
				interstitialAd = wx.createInterstitialAd({
					adUnitId: 'adunit-a893ed980174425c'
				})
			}
		},
		onShow() {
			if (interstitialAd) {
				interstitialAd.show().catch((err) => {
					console.error(err)
				})
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.newsList[0].title,
				path: '/pages/index/index',
				imageUrl: '',
			}
		},
		methods: {
			go() {
				uni.navigateToMiniProgram({
					appId: 'wx67036938335db889', //这个是要跳转的小程序appid  值为示例
					path: 'page/index/index?code=' + this.code, //跳转到指定界面，可以传参如果多个参如下 
					//path: 'page/index/index?code='+this.code+'&code2='+this.code2+'&code3='+this.code3,//传多个参数示例  & 是拼接的不是参数名称，不可以省略
					//也可以通过以下方法传参
					extraData: {
						code: this
							.code, //目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据。如果跳转的是小游戏，可以在 wx.onShow、wx.getLaunchOptionsSync 中可以获取到这份数据数据。
					},
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			// 订阅推送
			subscribe() {
				console.log('订阅推送', 1);
				uni.requestSubscribeMessage({
					tmplIds: ['pew_Y4QvWXDd1psA7xnymIST2jERtbGh3kscftZRX6c'],
					complete: (res) => {
						console.log(res, res);
					}
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				let item = this.newsList[0];
				if (!item) return false
				let beforeid = this.newsList[0].fixedtime;
				let data = {
					'page': 1,
					'beforeid': beforeid
				};
				this.$apis.getIndexlist(data).then(res => {
					this.mescroll.endSuccess();
					if (res.data.code == 1) {
						for (var i = 0; i < res.data.newslist.length; i++) {
							var j = res.data.newslist.length - i - 1;
							this.newsList.unshift((res.data.newslist[j]));
							this.data[0].newslist.unshift(res.data.newslist[j]);
						}
					}
					this.count = res.data.count;
					//显示提示
					// #ifdef H5
					this.top = uni.upx2px(100 + 88) + "px"; // H5的高度需加上 88的标题栏
					// #endif

					// #ifndef H5
					this.top = uni.upx2px(0) + "px"; // 非H5不必加
					// #endif
					setTimeout(() => {
						this.top = 0;
					}, 2000);
				}).catch(() => {
					this.mescroll.endErr();
				});
				//this.mescroll.resetUpScroll()

			},
			upCallback(page) {
				this.pagenow = page.num;
				let length = this.newsList.length;
				let endid = 0;
				if (length > 0) {
					endid = this.newsList[length - 1].fixedtime;
				}
				if (page.num > 6) {
					this.mescroll.endUpScroll(1)
					return false;
				}

				let data = {
					'page': page.num,
					'pageize': page.size,
					'endid': endid
				};
				var that = this;
				// this.$apis.getIndexlist(data).then(res => {
				this.$apis.getCardIndexlist(data).then(res => {
					this.mescroll.endSuccess(res.data.newslist.length);
					//追加新数据
					if (page.num == 2 && !this.showMore) {
						this.tempnewsList = this.newsList.concat(res.data.newslist);
						this.tempdata = this.data.concat(res.data);
					} else {
						this.newsList = this.newsList.concat(res.data.newslist);
						this.data = this.data.concat(res.data);
						this.$nextTick(() => {
							this.showMore = false
						})
					}
				}).catch(() => {
					this.mescroll.endErr();
				});
			},
			clickToDetail: function(index, type) {
				uni.navigateTo({
					url: '/pages/news/detail?ano=' + index
				})
			},
			getBannerList: function() {
				let data = {};
				let that = this;
				that.$apis.getBanner(data).then(res => {
					//追加新数据
					that.banner = res.banner;
				})
			},
			// 查看激励广告
			seemore() {
				rewardedVideoAd.show()
				rewardedVideoAd.onClose(res => {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
						console.log('sussess', 123);
						this.showMore = true
						this.newsList = this.tempnewsList;
						this.data = this.tempdata;
						// 正常播放结束，可以下发游戏奖励
					} else {
						// this.showMore = false //true false
						// 播放中途退出，不下发游戏奖励
					}
				})
			}
		}
	}
</script>
<style>
	.cont {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner {
		width: 100%;
		/* height: 410rpx; */
		overflow: hidden;
		margin-top: 50rpx;

	}

	.banner button {
		width: 80%;
		margin: 0 auto;
		background-color: #ff363f;
		color: #fff;
	}

	.banner image {
		width: 100%;
	}

	.dateimg {
		margin: 0 auto;
		width: 150rpx;
		margin-bottom: 30rpx;
		float: left;
	}

	.datetext {
		width: 180rpx;
		margin-bottom: 30rpx;
		float: left;
		text-align: center;
		color: rgb(185, 0, 0);
		font-weight: 900;
	}

	.showdate {
		height: 70rpx;
		text-align: center;
		overflow: hidden;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.userinfo-avatar {
		overflow: hidden;
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		margin-top: 50rpx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.userinfo {
		position: absolute;
		height: 320rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		top: 230rpx;
		padding-left: 255px;
	}

	.userinfo_thumb {
		position: absolute;
		display: block;
		width: 230rpx;
		height: 230rpx;
		animation: rotate2d 15s linear infinite;
		-webkit-animation: rotate2d 15s linear infinite;
	}

	.userinfo_show {
		right: 0;
		width: 250rpx;
		height: 250rpx;
		position: absolute;
		top: 136px;
	}

	@-webkit-keyframes rotate2d {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}

	@keyframes rotate2d {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}


	.download-tip {
		z-index: 900;
		position: fixed;
		top: calc(var(--window-top) + 20upx);
		left: 0;
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
		text-align: center;
		background-color: rgba(255, 130, 1, .7);
		color: white;
		-webkit-transition: top 300ms;
		transition: top 300ms;
	}

	.showtips {
		display: none;
	}

	//广告
	.adContainer {
		width: 100%;
	}


	.seemore {
		/* position: fixed; */
		/* bottom: 5vw; */
		left: 0;
		right: 0;
		width: 90%;
		height: 15vw;
		background-color: #09bb07;
		color: #fff;
		text-align: center;
		margin: 0 auto;
		font-size: 22px;
		line-height: 15vw;
	}

	.gohello {
		width: 35vw;
		background-color: red;
		text-align: center;
		padding: 3vw;
		color: #fff;
		margin: 0 auto;
		display: block;
		border-radius: 250px;
	}

	.topimg {
		width: 100%;
	}
</style>